<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>许愿列表 - 心愿社交</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        /* 基础样式 */
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #f8f9fa;
            color: #333;
        }
        
        /* 导航栏 */
        .navbar {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .logo {
            font-weight: 700;
            font-size: 1.5rem;
            color: #e74c3c;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        /* 页面标题 */
        .page-title {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }
        
        /* 筛选区域 */
        .filters-container {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            padding: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .filter-section {
            margin-bottom: 1.5rem;
        }
        
        .filter-title {
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: #495057;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        /* 标签筛选 */
        .tag-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
        }
        
        .tag-filter {
            padding: 6px 16px;
            border-radius: 20px;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            color: #495057;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .tag-filter.active {
            background-color: #e74c3c;
            color: white;
            border-color: #e74c3c;
        }
        
        .tag-filter:hover:not(.active) {
            border-color: #e74c3c;
            color: #e74c3c;
        }
        
        /* 日期和排序筛选 */
        .date-sort-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            align-items: center;
        }
        
        .custom-select-wrapper {
            flex: 1;
            min-width: 200px;
        }
        
        /* 高级筛选按钮 */
        .advanced-filter-btn {
            background-color: transparent;
            border: 1px solid #dee2e6;
            color: #495057;
            padding: 6px 16px;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.2s;
        }
        
        .advanced-filter-btn:hover {
            border-color: #e74c3c;
            color: #e74c3c;
        }
        
        /* 搜索框 */
        .search-container {
            position: relative;
            margin-bottom: 1.5rem;
        }
        
        .search-input {
            width: 100%;
            padding: 10px 16px 10px 40px;
            border-radius: 8px;
            border: 1px solid #dee2e6;
            font-size: 1rem;
            transition: all 0.2s;
        }
        
        .search-input:focus {
            outline: none;
            border-color: #e74c3c;
            box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
        }
        
        .search-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #6c757d;
        }
        
        /* 高级筛选面板 */
        .advanced-filters {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 1.25rem;
            margin-top: 1rem;
            display: none;
        }
        
        .advanced-filters.show {
            display: block;
            animation: fadeIn 0.3s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .filter-group {
            margin-bottom: 1rem;
        }
        
        .filter-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }
        
        .price-range {
            display: flex;
            gap: 1rem;
        }
        
        .price-input {
            flex: 1;
            padding: 6px 12px;
            border-radius: 6px;
            border: 1px solid #dee2e6;
        }
        
        /* 筛选结果统计 */
        .results-stats {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #e9ecef;
        }
        
        .results-count {
            color: #6c757d;
            font-size: 0.9rem;
        }
        
        .view-options {
            display: flex;
            gap: 0.5rem;
        }
        
        .view-btn {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            border: 1px solid #dee2e6;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .view-btn.active {
            background-color: #e74c3c;
            color: white;
            border-color: #e74c3c;
        }
        
        /* 许愿卡片 */
        .wish-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            overflow: hidden;
            transition: transform 0.2s, box-shadow 0.2s;
            margin-bottom: 1.5rem;
        }
        
        .wish-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .wish-list-view .wish-card {
            display: flex;
        }
        
        .wish-grid-view {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
        }
        
        .wish-grid-view .wish-card {
            display: flex;
            flex-direction: column;
        }
        
        .wish-image {
            width: 120px;
            height: 120px;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .wish-grid-view .wish-image {
            width: 100%;
            height: 180px;
        }
        
        .wish-content {
            padding: 1rem;
            flex: 1;
        }
        
        .wish-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .wish-description {
            color: #6c757d;
            font-size: 0.9rem;
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .wish-meta {
            display: flex;
            align-items: center;
            color: #6c757d;
            font-size: 0.85rem;
            margin-bottom: 0.75rem;
        }
        
        .wish-meta .dot {
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background-color: #6c757d;
            margin: 0 8px;
        }
        
        .wish-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 0.75rem;
        }
        
        .wish-tag {
            font-size: 0.8rem;
            padding: 2px 8px;
            border-radius: 4px;
            background-color: #f1f3f5;
            color: #495057;
        }
        
        .wish-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85rem;
            color: #6c757d;
        }
        
        .action-group {
            display: flex;
            gap: 1rem;
        }
        
        .action-item {
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            transition: color 0.2s;
        }
        
        .action-item:hover {
            color: #e74c3c;
        }
        
        .action-item.liked {
            color: #e74c3c;
        }
        
        .action-item.saved {
            color: #f39c12;
        }
        
        /* 作者信息 */
        .author-info {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 0.75rem;
        }
        
        .author-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-name {
            font-weight: 500;
            font-size: 0.9rem;
            color: #333;
            text-decoration: none;
        }
        
        .author-name:hover {
            color: #e74c3c;
            text-decoration: underline;
        }
        
        /* 加载更多按钮 */
        .load-more {
            display: block;
            margin: 2rem auto;
            padding: 10px 24px;
            background-color: white;
            border: 1px solid #e74c3c;
            color: #e74c3c;
            border-radius: 6px;
            font-weight: 500;
            transition: all 0.2s;
        }
        
        .load-more:hover {
            background-color: #e74c3c;
            color: white;
        }
        
        /* 页脚 */
        footer {
            background-color: white;
            padding: 3rem 0;
            margin-top: 3rem;
            border-top: 1px solid #e9ecef;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .wish-list-view .wish-card {
                flex-direction: column;
            }
            
            .wish-list-view .wish-image {
                width: 100%;
                height: 160px;
            }
            
            .date-sort-filters {
                flex-direction: column;
                align-items: stretch;
            }
            
            .advanced-filter-btn {
                width: 100%;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg py-3">
        <div class="container">
            <a href="#" class="logo">
                <i class="fas fa-heart"></i>
                <span>心愿社交</span>
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
                <i class="fas fa-bars"></i>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarContent">
                <ul class="navbar-nav ms-auto gap-3">
                    <li class="nav-item">
                        <a href="#" class="nav-link"><i class="fas fa-home me-1"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link active"><i class="fas fa-list me-1"></i> 许愿列表</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link"><i class="fas fa-bell me-1"></i> 通知</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="btn btn-danger rounded-pill">
                            <i class="fas fa-plus me-1"></i> 发布许愿
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <!-- 主内容区 -->
    <div class="container py-5">
        <h1 class="page-title">许愿列表</h1>
        
        <!-- 筛选容器 -->
        <div class="filters-container">
            <!-- 搜索框 -->
            <div class="search-container">
                <i class="fas fa-search search-icon"></i>
                <input type="text" class="search-input" placeholder="搜索许愿内容、标签或用户...">
            </div>
            
            <!-- 分类筛选 -->
            <div class="filter-section">
                <h3 class="filter-title">
                    <i class="fas fa-tags"></i> 分类筛选
                </h3>
                <div class="tag-filters">
                    <div class="tag-filter active">全部类别</div>
                    <div class="tag-filter">生日礼物</div>
                    <div class="tag-filter">节日愿望</div>
                    <div class="tag-filter">旅行相关</div>
                    <div class="tag-filter">学习成长</div>
                    <div class="tag-filter">生活家居</div>
                    <div class="tag-filter">兴趣爱好</div>
                    <div class="tag-filter">电子数码</div>
                    <div class="tag-filter">书籍文具</div>
                    <div class="tag-filter">公益活动</div>
                </div>
            </div>
            
            <!-- 日期和排序筛选 -->
            <div class="filter-section">
                <h3 class="filter-title">
                    <i class="fas fa-sort"></i> 时间与排序
                </h3>
                <div class="date-sort-filters">
                    <div class="custom-select-wrapper">
                        <select class="form-select">
                            <option value="">全部时间</option>
                            <option value="today">今天</option>
                            <option value="week">本周</option>
                            <option value="month">本月</option>
                            <option value="quarter">近三个月</option>
                            <option value="year">今年</option>
                        </select>
                    </div>
                    
                    <div class="custom-select-wrapper">
                        <select class="form-select">
                            <option value="recommend">推荐排序</option>
                            <option value="latest">最新发布</option>
                            <option value="hot">热门优先</option>
                            <option value="mostliked">点赞最多</option>
                            <option value="mostcommented">评论最多</option>
                        </select>
                    </div>
                    
                    <button class="advanced-filter-btn" id="advancedFilterBtn">
                        <i class="fas fa-sliders-h"></i> 高级筛选
                    </button>
                </div>
                
                <!-- 高级筛选面板 -->
                <div class="advanced-filters" id="advancedFilters">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="filter-group">
                                <label class="filter-label">预算范围</label>
                                <div class="price-range">
                                    <input type="number" class="price-input" placeholder="最低" min="0">
                                    <span class="align-self-center">-</span>
                                    <input type="number" class="price-input" placeholder="最高" min="0">
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="filter-group">
                                <label class="filter-label">是否有图片</label>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="hasImage" id="imageAny" checked>
                                    <label class="form-check-label" for="imageAny">不限</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="hasImage" id="imageYes">
                                    <label class="form-check-label" for="imageYes">有图片</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="hasImage" id="imageNo">
                                    <label class="form-check-label" for="imageNo">无图片</label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="filter-group">
                                <label class="filter-label">互动情况</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="hasLikes">
                                    <label class="form-check-label" for="hasLikes">有一定点赞数</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="hasComments">
                                    <label class="form-check-label" for="hasComments">有评论</label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="filter-group">
                                <label class="filter-label">用户类型</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="verifiedUsers" checked>
                                    <label class="form-check-label" for="verifiedUsers">认证用户</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="newUsers">
                                    <label class="form-check-label" for="newUsers">新用户</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="d-flex gap-2 mt-2">
                        <button class="btn btn-danger btn-sm">应用筛选</button>
                        <button class="btn btn-outline-secondary btn-sm">重置</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 筛选结果统计和视图切换 -->
        <div class="results-stats">
            <div class="results-count">找到 <strong>128</strong> 个符合条件的许愿</div>
            <div class="view-options">
                <button class="view-btn active" id="listViewBtn" title="列表视图">
                    <i class="fas fa-list"></i>
                </button>
                <button class="view-btn" id="gridViewBtn" title="网格视图">
                    <i class="fas fa-th"></i>
                </button>
            </div>
        </div>
        
        <!-- 许愿列表 -->
        <div class="wish-list wish-list-view" id="wishContainer">
            <!-- 许愿卡片1 -->
            <div class="wish-card">
                <img src="https://picsum.photos/400/300?random=1" alt="手绘板" class="wish-image">
                <div class="wish-content">
                    <div class="author-info">
                        <img src="https://picsum.photos/100/100?random=101" alt="陈明的头像" class="author-avatar">
                        <a href="#" class="author-name">陈明</a>
                        <span class="wish-meta">
                            <span>2小时前</span>
                            <span class="dot"></span>
                            <span>电子数码</span>
                        </span>
                    </div>
                    <h3 class="wish-title">想要一块专业手绘板，开始我的数字绘画之旅</h3>
                    <p class="wish-description">一直想学习数字绘画，希望能有一块Wacom的手绘板，型号最好是Intuos Pro，预算在2000元左右。</p>
                    <div class="wish-tags">
                        <span class="wish-tag">#绘画</span>
                        <span class="wish-tag">#数码</span>
                        <span class="wish-tag">#兴趣</span>
                    </div>
                    <div class="wish-actions">
                        <div class="action-group">
                            <div class="action-item like-btn">
                                <i class="far fa-heart"></i>
                                <span>128</span>
                            </div>
                            <div class="action-item comment-btn">
                                <i class="far fa-comment"></i>
                                <span>32</span>
                            </div>
                            <div class="action-item view-btn">
                                <i class="far fa-eye"></i>
                                <span>856</span>
                            </div>
                        </div>
                        <div class="action-item save-btn">
                            <i class="far fa-bookmark"></i>
                            <span>45</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 许愿卡片2 -->
            <div class="wish-card">
                <img src="https://picsum.photos/400/300?random=2" alt="露营装备" class="wish-image">
                <div class="wish-content">
                    <div class="author-info">
                        <img src="https://picsum.photos/100/100?random=102" alt="李婷的头像" class="author-avatar">
                        <a href="#" class="author-name">李婷</a>
                        <span class="wish-meta">
                            <span>5小时前</span>
                            <span class="dot"></span>
                            <span>生活家居</span>
                        </span>
                    </div>
                    <h3 class="wish-title">希望能有一套轻便的露营装备，周末可以去郊外放松</h3>
                    <p class="wish-description">想开始尝试露营，需要一个双人帐篷和睡袋，希望重量轻一点，方便携带。</p>
                    <div class="wish-tags">
                        <span class="wish-tag">#露营</span>
                        <span class="wish-tag">#户外</span>
                        <span class="wish-tag">#生活</span>
                    </div>
                    <div class="wish-actions">
                        <div class="action-group">
                            <div class="action-item like-btn liked">
                                <i class="fas fa-heart"></i>
                                <span>256</span>
                            </div>
                            <div class="action-item comment-btn">
                                <i class="far fa-comment"></i>
                                <span>58</span>
                            </div>
                            <div class="action-item view-btn">
                                <i class="far fa-eye"></i>
                                <span>1243</span>
                            </div>
                        </div>
                        <div class="action-item save-btn">
                            <i class="far fa-bookmark"></i>
                            <span>92</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 许愿卡片3（无图） -->
            <div class="wish-card">
                <div class="wish-content" style="border-left: 4px solid #e74c3c;">
                    <div class="author-info">
                        <img src="https://picsum.photos/100/100?random=108" alt="周杰的头像" class="author-avatar">
                        <a href="#" class="author-name">周杰</a>
                        <span class="wish-meta">
                            <span>3小时前</span>
                            <span class="dot"></span>
                            <span>学习成长</span>
                        </span>
                    </div>
                    <h3 class="wish-title">希望能找到一位编程导师，指导我学习Python</h3>
                    <p class="wish-description">刚入门编程，遇到了很多问题，希望能有一位有经验的开发者指导我，提高学习效率。</p>
                    <div class="wish-tags">
                        <span class="wish-tag">#编程</span>
                        <span class="wish-tag">#学习</span>
                        <span class="wish-tag">#Python</span>
                    </div>
                    <div class="wish-actions">
                        <div class="action-group">
                            <div class="action-item like-btn">
                                <i class="far fa-heart"></i>
                                <span>76</span>
                            </div>
                            <div class="action-item comment-btn">
                                <i class="far fa-comment"></i>
                                <span>24</span>
                            </div>
                            <div class="action-item view-btn">
                                <i class="far fa-eye"></i>
                                <span>328</span>
                            </div>
                        </div>
                        <div class="action-item save-btn">
                            <i class="far fa-bookmark"></i>
                            <span>32</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 许愿卡片4 -->
            <div class="wish-card">
                <img src="https://picsum.photos/400/300?random=10" alt="音乐会门票" class="wish-image">
                <div class="wish-content">
                    <div class="author-info">
                        <img src="https://picsum.photos/100/100?random=103" alt="王浩的头像" class="author-avatar">
                        <a href="#" class="author-name">王浩</a>
                        <span class="wish-meta">
                            <span>昨天</span>
                            <span class="dot"></span>
                            <span>兴趣爱好</span>
                        </span>
                    </div>
                    <h3 class="wish-title">想和女朋友一起去看周杰伦演唱会</h3>
                    <p class="wish-description">女朋友是周杰伦的忠实粉丝，希望能买到两张演唱会门票作为我们的周年纪念礼物。</p>
                    <div class="wish-tags">
                        <span class="wish-tag">#音乐</span>
                        <span class="wish-tag">#演唱会</span>
                        <span class="wish-tag">#礼物</span>
                    </div>
                    <div class="wish-actions">
                        <div class="action-group">
                            <div class="action-item like-btn">
                                <i class="far fa-heart"></i>
                                <span>324</span>
                            </div>
                            <div class="action-item comment-btn">
                                <i class="far fa-comment"></i>
                                <span>76</span>
                            </div>
                            <div class="action-item view-btn">
                                <i class="far fa-eye"></i>
                                <span>1567</span>
                            </div>
                        </div>
                        <div class="action-item save-btn saved">
                            <i class="fas fa-bookmark"></i>
                            <span>128</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 加载更多按钮 -->
        <button class="load-more">
            <i class="fas fa-spinner fa-spin me-2" style="display: none;"></i>
            加载更多许愿
        </button>
    </div>
    
    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="text-center">
                <div class="mb-3">
                    <a href="#" class="logo">
                        <i class="fas fa-heart"></i>
                        <span>心愿社交</span>
                    </a>
                </div>
                <p class="text-muted mb-3">分享你的愿望，连接每一份善意</p>
                <div class="d-flex justify-content-center gap-4 mb-4">
                    <a href="#" class="text-muted"><i class="fab fa-weibo fa-lg"></i></a>
                    <a href="#" class="text-muted"><i class="fab fa-wechat fa-lg"></i></a>
                    <a href="#" class="text-muted"><i class="fab fa-instagram fa-lg"></i></a>
                </div>
                <p class="text-muted text-sm">&copy; 2023 心愿社交 版权所有</p>
            </div>
        </div>
    </footer>
    


    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 高级筛选面板切换
        const advancedFilterBtn = document.getElementById('advancedFilterBtn');
        const advancedFilters = document.getElementById('advancedFilters');
        
        advancedFilterBtn.addEventListener('click', function() {
            advancedFilters.classList.toggle('show');
        });
        
        // 标签筛选功能
        const tagFilters = document.querySelectorAll('.tag-filter');
        tagFilters.forEach(tag => {
            tag.addEventListener('click', function() {
                tagFilters.forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                showNotification(`已筛选：${this.textContent}`);
                // 这里可以添加实际筛选逻辑
            });
        });
        
        // 视图切换功能
        const listViewBtn = document.getElementById('listViewBtn');
        const gridViewBtn = document.getElementById('gridViewBtn');
        const wishContainer = document.getElementById('wishContainer');
        
        listViewBtn.addEventListener('click', function() {
            wishContainer.classList.remove('wish-grid-view');
            wishContainer.classList.add('wish-list-view');
            listViewBtn.classList.add('active');
            gridViewBtn.classList.remove('active');
        });
        
        gridViewBtn.addEventListener('click', function() {
            wishContainer.classList.remove('wish-list-view');
            wishContainer.classList.add('wish-grid-view');
            gridViewBtn.classList.add('active');
            listViewBtn.classList.remove('active');
        });
        
        // 点赞功能
        document.querySelectorAll('.like-btn').forEach(button => {
            button.addEventListener('click', function() {
                const icon = this.querySelector('i');
                const countElem = this.querySelector('span');
                const currentCount = parseInt(countElem.textContent);
                
                if (icon.classList.contains('far')) {
                    // 点赞
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    this.classList.add('liked');
                    countElem.textContent = currentCount + 1;
                    showNotification('点赞成功');
                } else {
                    // 取消点赞
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    this.classList.remove('liked');
                    countElem.textContent = currentCount - 1;
                    showNotification('取消点赞');
                }
            });
        });
        
        // 收藏功能
        document.querySelectorAll('.save-btn').forEach(button => {
            button.addEventListener('click', function() {
                const icon = this.querySelector('i');
                const countElem = this.querySelector('span');
                const currentCount = parseInt(countElem.textContent);
                
                if (icon.classList.contains('far')) {
                    // 收藏
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    this.classList.add('saved');
                    countElem.textContent = currentCount + 1;
                    showNotification('收藏成功');
                } else {
                    // 取消收藏
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    this.classList.remove('saved');
                    countElem.textContent = currentCount - 1;
                    showNotification('取消收藏');
                }
            });
        });
        
        // 评论按钮点击
        document.querySelectorAll('.comment-btn').forEach(button => {
            button.addEventListener('click', function() {
                const wishTitle = this.closest('.wish-card').querySelector('.wish-title').textContent;
                showNotification(`查看 "${wishTitle.substring(0, 10)}..." 的评论`);
            });
        });
        
        // 加载更多
        const loadMoreBtn = document.querySelector('.load-more');
        loadMoreBtn.addEventListener('click', function() {
            const spinner = this.querySelector('i');
            spinner.style.display = 'inline-block';
            this.disabled = true;
            
            // 模拟加载延迟
            setTimeout(() => {
                spinner.style.display = 'none';
                this.disabled = false;
                showNotification('已加载更多许愿');
                // 这里可以添加实际加载更多逻辑
            }, 1500);
        });
        
        
        // 搜索功能
        const searchInput = document.querySelector('.search-input');
        searchInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                const searchTerm = this.value.trim();
                if (searchTerm) {
                    showNotification(`正在搜索: ${searchTerm}`);
                    // 这里可以添加实际搜索逻辑
                }
            }
        });
        
        // 排序和日期筛选变化
        document.querySelectorAll('.form-select').forEach(select => {
            select.addEventListener('change', function() {
                showNotification(`已选择: ${this.options[this.selectedIndex].text}`);
                // 这里可以添加实际筛选逻辑
            });
        });
    </script>
</body>
</html>

